<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">预约查看</block>
		</cu-custom>
		<view>
			<view class="text-pink bg-white  text-sm flex justify-between padding">
				<view>{{aroomyyjl.rmorderid}}</view>
			</view>
			<view class="text-gray text-sm flex justify-between padding bg-white">
				<view v-if="aroomyyjl.tflg != 'C'">
					<text class="bg-green padding-xs round" v-if="aroomyyjl.pflg">已支付</text>
					<text class="bg-red padding-xs round" v-else>未支付</text>
				</view>
				<view>
					<text v-if="aroomyyjl.tflg == 'P'">未开始</text>
					<text v-else-if="aroomyyjl.tflg == 'S'">已开始</text>
					<text v-else-if="aroomyyjl.tflg == 'F'">已结束</text>
					<text v-else-if="aroomyyjl.tflg == 'G'">已结算</text>
					<text v-else-if="aroomyyjl.tflg == 'R'">提款中</text>
					<text v-else-if="aroomyyjl.tflg == 'T'">已提款</text>
					<text class="cu-tag bg-red round" v-else-if="aroomyyjl.tflg == 'C'">已取消</text>
					<text v-else-if="aroomyyjl.tflg == 'J'">退款中</text>
					<text v-else-if="aroomyyjl.tflg == 'E'">已退款</text>
				</view>
			</view>
			
			<view>
				<view class="cu-item shadow bg-white padding">
					<view class="cu-list menu-avatar">
						<view class="cu-item flex align-center ">
							<view @tap="chat(adz.clientid)" class="cu-avatar round xl" :style="{backgroundImage: `url(${adz.cover})`}">
							</view>
							<view class="content flex-sub margin-left">
								<view class="flex justify-between ">
									<view>{{adz.dname ? adz.dname : '未设置昵称'}}</view>
								</view>
								<view class="flex justify-between align-center margin-top-xs">
									<text>{{adz.tel ? adz.tel : '未设置电话'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="aroomyyjl.tflg != 'C'" class="">
				<view class="cu-card case bg-white">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="aroom.cover" mode="widthFix"></image>
							<view class="cu-bar bg-pink flex flex-direction padding align-start">
								<view class="text-cut text-lg">{{aroom.rname}}</view>
								<view class="text-cut">
									<text> {{aroom.mj}}㎡/</text>
									<text> {{aroom.yjds}}个垫子/</text>
									<text> 容纳{{aroom.mj}}人</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="aroomyyjl.tflg != 'C'" class="margin-top">
				<view class="cu-form-group">
					<view class="text-xxl text-pink">
						<text class="iconfont icon-yuyuejilu"></text>
						<text class="text-xs">时段</text>
					</view>
				</view>
				<view class="bg-white">
					<view>
						<view class="padding" v-for="(item,key) in dates" :key="key">
							<view class="padding-bottom">{{key}}</view>
							<view class="shadow round">
								<view class="padding-sm" v-for="(to,tey) in item" :key="tey">
									<view class="flex">
										<view class="flex-sub">
											<view class="text-gray flex justify-between">
												<view class="text-red">￥{{to.price / 100}}</view>
												<view class="text-gray">
													<text class="cuIcon-timefill margin-lr-xs">{{to.st}}</text>
													<text>~</text>
													<text class="cuIcon-timefill margin-lr-xs">{{to.et}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="aroomyyjl.tflg != 'C'" class="padding bg-white flex justify-end align-center">
			<view>
				<text class="text-red">实付【{{aroomyyjl.sfje / 100}}】+</text>
				<text class="text-red">余额付【{{aroomyyjl.yezfje / 100}}】=</text>
				<text class="text-red">￥{{aroomyyjl.amont / 100}}</text>
			</view>
		</view>
		<view v-if="aroomyyjl.sfje > 0 && !aroomyyjl.pflg && aroomyyjl.tflg != 'C'" class="padding">
			<button @click="pay" class="cu-btn block bg-green lg">支付(剩余：{{diffInSeconds}}秒)</button>
		</view>
		<view class="padding">
			<button v-if="aroomyyjl.tflg == 'P' && aroomyyjl.pflg" @click="cancel"
				class="cu-btn block bg-red lg">取消</button>
		</view>
		<view v-if="aroomyyjl.tflg != 'P' && aroomyyjl.tflg != 'S' && aroomyyjl.tflg != 'C'" class=" bg-white">
			<view class="cu-form-group">
				<view class="text-xxl text-pink">
					<text class="cuIcon-comment"></text>
					<text class="text-xs">我的评价</text>
				</view>
			</view>
			<view class="padding-left padding-right">
				<view class="flex justify-end padding-sm align-center">
					<text>评分：</text>
					<text>{{aroompj.count}}</text>
				</view>
				<view class="padding-bottom" v-if="aroompj.rmpjid">
					<view
						class="cu-textarea bg-gray w-100 padding-xs">
						{{aroompj.content}}
					</view>
				</view>
				<view v-else>
					<textarea
						class="cu-textarea bg-gray w-100 padding-xs" 
						placeholder="写下你的感受..." 
						v-model="aroompj.content"
						maxlength="100"
						bindinput="onContentChange"></textarea>
					<view class="flex justify-end margin-top-sm">
						<text class="text-gray">{{aroompj.content.length}}/100</text>
					</view>
					<view class="padding-top padding-bottom">
						<button  @click="comment"
							class="cu-btn block bg-green lg">发送评论</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				rmorderid: "",
				diffInSeconds: 0,
				isEdPrice: false,
				aroomyyjl: {},
				aroom: {},
				astore: {},
				adz: {},
				ajiaolian: {},
				checkedDates: {},
				dates: {},
				aroompj: {
					content: "",
					count: 5,
				}
			};
		},
		onLoad(options) {
			this.rmorderid = options.rmorderid;
			this.loadyyjl();
		},
		methods: {
			chat: function(clientid) {
				console.log(111)
				this.message.chat(clientid);
			},
			loadyyjl: function() {
				this.api("/yy/info/get").send({
					rmorderid: this.rmorderid
				}).then(data => {
					this.aroomyyjl = data.aroomyyjl;
					this.ajiaolian = data.ajiaolian;
					this.aroom = data.aroom;
					this.dates = data.dates;
					this.astore = data.astore;
					this.adz = data.adz;
					
					if (data.aroompj) {
						this.aroompj = data.aroompj;
					} else {
						this.aroompj = {
							content: "",
							count: 5,
							jlid: this.store.state.jl.jlid,
							jname: this.store.state.jl.jlname,
							jcover: this.store.state.jl.cover,
							roomid: this.aroomyyjl.roomid,
							rmorderid: this.aroomyyjl.rmorderid
						};
					}

					this.util.dateUtils.countdownToDate(this.aroomyyjl.ct, 10, (current, diffInSeconds) => {
						this.diffInSeconds = diffInSeconds;
					});
				});
			},
			pay: function() {
				if (this.aroomyyjl.sfje > 0) {
					this.pay.exePay(JSON.parse(this.aroomyyjl.prepaydata)).then(data => {
						this.loadyyjl();
					});
				}
			},
			cancel: function() {
				this.api("/yy/cancel").send({
					aroomyyjl: this.aroomyyjl,
				}).then(data => {
					this.message.info("取消成功");
				});
			},
			comment: function() {
				if (this.aroompj.content.length == 0) {
					this.message.err("请填写评论");
					return;
				}
				this.api("/room/pj").send({
					aroompj: this.aroompj
				}).then(data => {
					this.aroompj = data.aroompj;
					this.$forceUpdate();
				});
			}
		}
	}
</script>

<style>
</style>